<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="utf-8">
		<title>支付方式</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
			.paystatus{
				text-align: center;
				padding: 50px 0px 20px 0px;
				
			}
			.success i,.error i{
				font-size: 50px;
				
			}
			.success i{
				color: #11cd6e;
			}
			.error i{
				color: #ff4e00;
			}
			.paystatus p{
				font-size: 30px;
				padding: 20px;
			}
			.paystatus p{
				color: #000;
			}
			.backinfo div{
				padding: 10px 10px 10px 30px;
				font-size: 15px;
				color: #999;
			}
			.backinfo div label{
				width: 20%;
				text-align: right;
				display: inline-block;
				font-weight: normal;
			}
			.mui-btn, button, input[type=button], input[type=reset], input[type=submit]{
				width: 80%;
				margin-top: 8rem;
				font-size: 20px;
				padding: 10px 0px;
			}
			
			@-webkit-keyframes bounceIn {
    0%, 100%, 20%, 40%, 60%, 80% {
        -webkit-animation-timing-function:cubic-bezier(0.215, .61, .355, 1);
        animation-timing-function:cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity:0;
        -webkit-transform:scale3d(.3, .3, .3);
        transform:scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform:scale3d(1.1, 1.1, 1.1);
        transform:scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform:scale3d(.9, .9, .9);
        transform:scale3d(.9, .9, .9)
    }
    60% {
        opacity:1;
        -webkit-transform:scale3d(1.03, 1.03, 1.03);
        transform:scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform:scale3d(.97, .97, .97);
        transform:scale3d(.97, .97, .97)
    }
    100% {
        opacity:1;
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}
@keyframes bounceIn {
    0%, 100%, 20%, 40%, 60%, 80% {
        -webkit-animation-timing-function:cubic-bezier(0.215, .61, .355, 1);
        animation-timing-function:cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity:0;
        -webkit-transform:scale3d(.3, .3, .3);
        transform:scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform:scale3d(1.1, 1.1, 1.1);
        transform:scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform:scale3d(.9, .9, .9);
        transform:scale3d(.9, .9, .9)
    }
    60% {
        opacity:1;
        -webkit-transform:scale3d(1.03, 1.03, 1.03);
        transform:scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform:scale3d(.97, .97, .97);
        transform:scale3d(.97, .97, .97)
    }
    100% {
        opacity:1;
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}
.bounceIn {
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
    -webkit-animation-name:bounceIn;
    animation-name:bounceIn
}
		</style>
	</head>

	<body>
		
		<div class="paystatus">
			<div class="success  bounceIn">
				<i class="icon iconfont">&#xe607;</i>
				<p>支付成功</p>
			</div>
			<div class="error" style="display: none;">
				<i class="icon iconfont">&#xe606;</i>
				<p>支付失败</p>
			</div>
		</div>
		
		<div class="backinfo">
			<div>
				<label for="">订单号:</label>
				15163541561
			</div>
			<div>
				<label for="">订单号:</label>
				下单时间
			</div>
		</div>
		<div class="text-center">
		<a type="button" class="mui-btn mui-btn-success mui-btn">返回首页活动</a>
		</div>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>